﻿@{
    ViewBag.Title = "Knockout Js-Introduction";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    <ol class="breadcrumb">
        <li><a href="/Home/Home">Home</a></li>
        <li><a href="/KnockoutJs/Introduction">KnockOut JS</a></li>
        <li class="active">Bindings-Control flow</li>
    </ol>
        <div id="introduction">
            <h1 class="text-left">Introduction Of Knockout JS</h1>
        </div>
        <div>
            <p>
                Knockout is a javascript library that can helps you to create an rich application and editable user interface with a data model. Knockout JS is independent javascript and implementation in model- view –viewmodel structure pattern templates. In this structure totally independent between view, viewmodel and model.
                Knockout JS can helps you to implement a more simply and maintainably applications.
            </p>
        </div>
        <div id="Basicfeatures">
            <h3>Basically main three features</h3>
            <ol start="1">
                <li><strong>Elegant dependency tracking –</strong>Auto change when you change in a data model</li>
                <li><strong>Declarative bindings-</strong>Simple and easy to connect with view to your data model.you can build complex dynamic user interface easily using nested binding concepts.</li>
                <li><strong>Trivially extensible-</strong>You can create custom behaviours binding for simple reuse in just a sevral lines of codes.</li>
            </ol>
        </div>
        <div id="moreaddtionalbenefits">
            <h3>More Additional Benefits</h3>
            <ol start="1">
                <li><strong>Pure JavaScript library </strong>works with any server or client-side technology</li>
                <li><strong>Can be added on top of your existing web application </strong>without requiring major architectural changes</li>
                <li><strong>Compact-</strong>around 13kb after zipping</li>
                <li><strong>Works on any mainstream browser </strong>(IE 6+, Firefox 2+, Chrome, Safari, others)</li>
                <li><strong>Comprehensive suite of specifications </strong>(developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms</li>
            </ol>
        </div>
        <div>
            <p>Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you. These features streamline and simplify the specification of complex relationships between view components, which in turn make the display more responsive and the user experience richer.</p>
            <p>
                You'll learn how to define a UI's appearance using views and declarative bindings, its data and behaviour using view models and observables, and how everything stays in sync automatically thanks to Knockout’s dependency tracking (even with arbitrary cascading chains of data).
            </p>
        </div>
        <div id="download">
            <h3>Downloads</h3>
            <p>
                Download the latest version of the Knockout JavaScript file from the downloads page. For normal
                development and production use, use the default, minified version (knockout-x.y.z.js).
                For debugging only, use the larger, non-minified version (knockout-x.y.z.debug.js). This behaves
                the same as the minified version, but has human-readable source code with full variable names
                and comments, and does not hide internal APIs
            </p>
            <div>

                <p>Installation: Simply to reference the JavaScript file using a &lt;script&gt; tag in your HTML page.</p>
            </div>
        </div>
        <div class="divcolor">
            <pre><code>&lt;script&gt;type='text/javascript' src='knockout-3.0.0.js'&lt;/script&gt;</code></pre>
        </div>
        This &lt;script&gt;add into your Data model.
        <div id="structureofmvvm">
            <h3>MVVM and View Models</h3>
            <p>Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:</p>
            <ul>
                <li><p><span class="blue">A model:</span> Your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.</p></li>
                <li>
                    <p>
                        <span class="blue">
                            A view model:
                        </span> A pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.
                        Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either - it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.
                    </p>
                </li>
                <li><p><span class="blue">A view:</span> A visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.</p></li>
            </ul>
            <p>To create a view model with KO, just declare any JavaScript object. For example,</p>
            <p class="divcolor">
                <pre><code> var myViewModel = {<br />personName: 'Bob',<br />personAge: 123<br />};</code></pre>
            </p>
            <p>You can then create a very simple view of this view model using a declarative binding. For example, the following markup displays the personName value:</p>
            <p class="divcolor"><pre><code>The name is &lt;span&gt;data-bind="text: personName"&gt;&lt;/span&gt;</code></pre></p>
            <h3>Activating Knockout</h3>
            <p>The data-bind attribute isn’t native to HTML, though it is perfectly OK (it’s strictly compliant in HTML 5, and causes no problems with HTML 4 even though a validator will point out that it’s an unrecognized attribute). But since the browser doesn’t know what it means, you need to activate Knockout to make it take effect.To activate Knockout, add the following line to a&lt;script&gt;block</p>
            <p class="divcolor">
                <pre><code> ko.applyBindings(myViewModel);</code></pre>
            </p>
            <p>You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery’s $ function.That does it! Now, your view will display as if you’d written the following HTML:</p>
            <p class="divcolor"><pre><code>The name is &lt;span&gt;Bob&lt;/span&gt;</code></pre></p>
        </div>
        <div id="example">
            <h3>Example:</h3>
            <div>
                <ol start="1">
                    <li>
                        <p>Creating basic MVC application.</p>
                        <img src="Images/1.png" class="img-thumbnail" alt="Creating basic MVC application" height=100% width=100% /><br />
                        <p></p>
                    </li>
                    <li>
                        <p>Give to name and select mvc4 web application.</p>
                        <img src="Images/2.png" class="img-thumbnail" alt="Give to name and select mvc4 web application" height=100% width=100% /><br />
                        <p></p>
                        <p><span class="blue">Select basic MVC, make folder of scripts and paste into latest knockout JavaScript file. </span></p>
                    </li>
                    <li>

                        <h4>Example 1</h4>
                        <p>This is basic example of the knockout js.</p>
                        <p>First required to use knockout js javascript file into your viewmodel</p>
                        <div class="divcolor">
                            <pre><code>&lt;script type="text/javascript" src="~/Scripts/knockout-3.0.0.js"&gt;&lt;/script&gt;</code></pre>
                        </div>
                        <p>In this example we bind viewmodel's text to your text and display value of <span class="blue">Firstname</span> and <span class="blue">Lastname.</span> Before that first the create view that contain two value first name and last name.</p>
                        <div class="divcolor">
                            <pre><code>&lt;script type=”text/javascript”&gt;<br />var viewModel={<br />firstName:"Jack",<br />lastName:"Reacher"<br />};<br />ko.applyBindings(viewModel);<br />&lt;/script&gt;</code></pre>
                        </div>
                        <p>And viewmodel is variable that hold's value and applybinding() for register viewmodel to knockout. </p>
                        <p>After done your binding of viewmodel then display contain into html webpage contain. Display values of First Name and Last Name that bind with the view model variables.</p>
                        <div class="divcolor">
                            <pre><code>&lt;p&gt;First name:&lt;strong data-bind="text:firstName"&gt;&lt;/strong&gt;&lt;/p&gt;<br />&lt;p&gt;Last name:&lt;strong data-bind="text:lastName"&gt;&lt;/strong&gt;&lt;/p&gt;<br /></code></pre>
                        </div>
                        <a href="#">Live Demo</a>
                        <h4>Example 2</h4>
                        <p>Last example we seen that binding value of viewdata variable to text.This example we can enter the value into input-text.</p>
                        <div class="divcolor">
                            <pre><code>&lt;p&gt;First name: &lt;strong data-bind="text:firstName"&gt;&lt;/strong&gt;&lt;/p&gt;<br />&lt;p&gt;First name: &lt;input data-bind="value:firstName" /&gt;&lt;/p&gt;<br />&lt;p&gt;Last name: &lt;strong data-bind="text:lastName"&gt;&lt;/strong&gt;&lt;/p&gt;<br />&lt;p&gt;Last name: &lt;input data-bind="value: lastName" /&gt;&lt;/p&gt;<br /></code></pre>
                        </div>
                        <p>
                            Last same view model in this example.Text-input ask for the input from user but one problem are there when you enter value then not affect into textboxes.
                        </p>
                        <p>In the next chapter solve the the problem of this example, using observable.</p>
                        <a href="#">Live Demo</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
